<template>
	<view class="settle">
		<u-toast ref="uToast"></u-toast>
		<image src="http://118.31.238.190/home/img_enterprist_agent_add_3.png" mode="widthFix" class="settle__top">
		</image>
		<view class="settle__tip">对公结算提供开户许可证，对私结算提供法人代表银行卡</view>

		<view class="settle__upload">
			<DeliverFileUpload :maxCount="1" :width="700" @success="onSuccess" @remove="onRemove"></DeliverFileUpload>
			<view class="tip">
				法人代表储蓄卡正面
			</view>
		</view>

		<u-form ref="uForm" class="settle__form">
			<u-form-item label="账号类型" label-width="200rpx" bg-color="white">
				<u-input value="个人账户" disabled="true" />

			</u-form-item>
			<u-form-item label="账号" label-width="200rpx" bg-color="white">
				<u-input v-model="form.accountNo" type="number" placeholder="请输入收款账户的账号" />

			</u-form-item>

			<u-form-item label="户名" label-width="200rpx" bg-color="white">
				<u-input v-model="form.accountName" type="text" placeholder="请输入收款账户的户名" />

			</u-form-item>
			<u-form-item label="开户行所在地" label-width="200rpx">

				<city text="请选择省市" @success="selectCity"></city>

			</u-form-item>
			<u-form-item label="开户行" label-width="200rpx">
				<u-input v-model="form.bankName" type="select" placeholder="请选择开户行" @click="goBank()" />

			</u-form-item>

			<u-form-item label="支行名称" label-width="200rpx">
				<u-input v-model="form.branchName" type="select" placeholder="请选择开户支行" @click="goBankBranch()" />
				<u-picker v-model="showSubBank" mode="region"></u-picker>
			</u-form-item>
			<u-form-item label="手机号" label-width="200rpx"><u-input v-model="form.accountMobileNo"
					placeholder="银行预留手机号" /></u-form-item>
		</u-form>


		<u-button class="m-20" type="primary" :custom-style="customStyle" @click="submit()">下一步</u-button>
	</view>
</template>

<script>
	import city from "../components/city/city.vue";
	import DeliverFileUpload from "@/components/DeliverFileUpload/DeliverFileUpload.vue";
	export default {
		components: {
			DeliverFileUpload,
			city
		},
		data() {
			return {
				accountData: {},
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					margin: '20rpx'
				},

				showBank: false,
				showCity: false,
				showSubBank: false,
				form: {
					accountImg: "",
					accountNo: "",
					accountName: "",
					bankName: "",
					bankCode: "",
					accountProvince: "",
					accountCity: "",
					accountArea: "",
					branchName: "",
					cnapsName: "", //同branchName
					cnapsNo: "", //branchCode
					accountMobileNo: "",
					accountType: "1" //1对私 2对公
				},
				cityList: [],
				city: "",

				fileList: [],
				ocrParam: {
					"path": "",
					"ocrType": "BANK_CARD"
				},
				basicForm: {},
				companyForm: {}
			}
		},
		onLoad(options) {
			this.basicForm = JSON.parse(decodeURIComponent(options.basicForm));
			this.companyForm = JSON.parse(decodeURIComponent(options.companyForm));

			this.querySetter();
		},

		methods: {
			onRemove(index) {
				this.fileList.splice(index, 1);
				this.form.accountImg = "";
				this.form.accountNo = "";
			},
			onSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.accountImg = filePath;
				//ocr识别
				this.getOcrRead(filePath);
			},
			selectCity(Object) {
				console.log("Object=" + JSON.stringify(Object))
				this.form.accountProvince = Object.accountProvince;
				this.form.accountCity = Object.accountCity;
				this.form.accountArea = Object.accountArea;
			},
			getOcrRead(filePath) {
				const _that = this;
				_that.ocrParam.path = filePath;
				this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {

					console.log("data=" + JSON.stringify(data.result))
					if (data.result) {
						_that.form.accountNo = data.result.bank_card_number.replace(/\s+/g, '');
					}
				});
			},
			querySetter() {
				const _that = this;
				this.$zx.user_api.querySetter().then((data) => {

					console.log("data=" + JSON.stringify(data))
					this.accountData = data;
					this.form.accountName = this.accountData.accountName;
				});
			},

			goBank() {
				const _that = this;
				uni.navigateTo({
					url: "/pages/bank/bankSelect",
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data) => {
							console.log("data=" + JSON.stringify(data))

							_that.form.bankName = data.data.name;
							_that.form.bankCode = data.data.code;
						},
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'data from starter page'
						})
					}


				});
			},
			goBankBranch() {
				const _that = this;

				if (!_that.form.bankCode) {
					uni.$zx.msg("请先选择开户行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountProvince) {
					uni.$zx.msg("请先选择开户城市", {
						duration: 4000,
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/bank/bankBranchSelect?province=" + _that.form.accountProvince + "&city=" +
						_that
						.form.accountCity + "&bankCode=" + _that.form.bankCode,

					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data) => {
							console.log("data=" + JSON.stringify(data))

							_that.form.branchName = data.data.name;
							_that.form.cnapsNo = data.data.code;
						},
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'data from starter page'
						})
					}


				});
			},

			submit() {
				const _that = this;

				if (_that.form.accountImg == 0) {
					uni.$zx.msg("请上传银行照片", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountNo) {
					uni.$zx.msg("请输入银行卡号", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.bankCode) {
					uni.$zx.msg("请选择开户行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountProvince) {
					uni.$zx.msg("请选择开户城市", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.branchName) {
					uni.$zx.msg("请选择开户支行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountMobileNo) {
					uni.$zx.msg("请输入银行预留手机号", {
						duration: 4000,
					});
					return;
				}
				console.log("form=" + JSON.stringify(this.form))
				this.$u.route({
					url: 'packageC/pages/business/addPersonThird',
					params: {
						"basicForm": encodeURIComponent(JSON.stringify(_that.basicForm)),
						"companyForm": encodeURIComponent(JSON.stringify(_that.companyForm)),
						"settleForm": encodeURIComponent(JSON.stringify(_that.form))
					}
				})


			}
		},

	}
</script>

<style scoped lang="scss">
	.settle {
		background-color: white;

		&__top {
			width: 100%;
		}

		&__tip {
			background-color: #f6f6f6;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			font-size: 12px;
		}

		&__form {
			background-color: white;
		}

		&__upload {
			background-color: white;
			padding: 20rpx;
		}
	}

	.tip {
		text-align: center;
	}
</style>